<template>
  <main class="tpl" style="min-height: 400px" @mousemove="move" @mouseup="leave">
    <section v-for="(item,index) in modals">
      <article class="add-model-box" v-if="ind === index && !item.type">
        <p>添加模块</p>
        <modelchoose :ind="index" @choose="choose"></modelchoose>
      </article>
      <section @mouseover="shows" @mouseleave="hides"  class="content-box text-center">
        <drag ref="drag" @lose="lose" @getid="getId(index)" :x="x" :y="y">
          <p class="choose-item" @click="modify(index)" v-if="!item.type">选择模块{{item.name}}</p>
          <article style="min-height: auto" v-else @click.stop="update(index,item)">
            <models :data.sync="item"></models>
          </article>
          <span class="handle-box" v-show="false">
            <i class="fa fa-plus" @click="add(index)"></i>
            <i class="fa fa-close" @click="remove(index)"></i>
          </span>
        </drag>
      </section>
    </section>
  </main>
</template>

<script>
  import tpl from './tplmixin'

  export default {
    mixins:[tpl],
    data () {
      return {
      }
    },
    methods: {

    }
  }
</script>
